$z-tooltip: 2;

// Our own, css-only tooltips
@media screen and (min-width: 768px) {
  [data-tip] {
    position: relative;

    // avoid tooltips getting in front of other interactive layout elements
    &::before,
    &::after {
      pointer-events: none;
    }

    &::after {
      content: attr(data-tip);
      font-size: 13px;
      line-height: 1.35em;
      color: white;
      background-color: darken($cool-gray, 10%);
      padding: 6px 12px;
      position: absolute;
      top: 96%;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: $z-tooltip;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s;
      white-space: nowrap;

      @include box-shadow;
    }

    &::before {
      border-bottom: 5px solid darken($cool-gray, 10%);
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      position: absolute;
      top: calc(96% - 5px);
      content: "";
      width: 0;
      height: 0;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: $z-tooltip;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s;
    }
  }

  [data-tip]:hover::after,
  [data-tip]:hover::before {
    opacity: 1;
    visibility: visible;
  }

  // Modify positioning for sidebar elements

  .k-drawer {
    [data-tip]::after {
      left: 95%;
      top: 50%;
      transform: translate(0, -50%);
    }

    [data-tip]::before {
      left: calc(95% - 5px);
      top: 50%;
      transform: translate(0, -50%);
      border-right: 5px solid darken($cool-gray, 10%);
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      border-left: none;
    }
  }

  // right aligned tooltips
  .right-tooltip [data-tip]::after,
  .right-tooltip[data-tip]::after {
    left: auto;
    right: calc(50% - 10px);
    transform: translate(0);
  }

  // left aligned tooltips
  .left-tooltip [data-tip]::after,
  .left-tooltip[data-tip]::after {
    left: calc(50% - 10px);
    right: auto;
    transform: translate(0);
  }

  // more actions in asset-row adjustment
  .asset-row .popover-menu [data-tip]::after {
    left: -60%;
  }

  // Modify positioning to header tooltips

  .mdl-layout__header [data-tip]::after {
    left: 50px;
  }

  .mdl-layout__header [data-tip]::before {
    left: 50px;
  }
}
